<template>
  <div class="uploadPic">
    <Modal
      class="upload"
      v-model="displaySwitch"
      title="上传商品图"
      :closable="false"
      :mask-closable="false"
      width="932">
      <div class="body">
        <div class="left">
          <el-input
            placeholder="请输入分类名称"
            v-model="typeName"
            size="small"
            style="width: 220px;">
            <i slot="suffix" class="el-input__icon el-icon-search el-icon" @click="searchKey"></i>
          </el-input>
          <Tree :data="typeList" @on-select-change="select"></Tree>
        </div>
        <div class="right">
          <div class="handleBox">
            <Button type="primary" :disabled="checkedPic.length<=0" @click="useCheckedPic">使用选中图片</Button>
            <Button type="primary" >上传图片</Button>
            <el-popconfirm title="确定要删除选中图片吗？" @confirm="deletePic">
              <Button type="primary" slot="reference" :disabled="checkedPic.length<=0" >删除图片</Button>
            </el-popconfirm>
          </div>
          <div class="picListBox">
            <div
              class="picBox"
              v-for="(item,index) in picList[pageIndex-1]"
              :key="index"
              @click="checkPic(item)"
              :class="checkedPic.indexOf(item)>=0?'active':''">
              <div class="img">
                <div class="imgB">
                  <img :src="item.src" alt="" :title="item.title">
                  <i v-if="checkedPic.indexOf(item)>=0">{{checkedPic.indexOf(item)+1}}</i>
                  <span v-if="checkedPic.indexOf(item)>=0" class="iconfont icon-jiaobiaoxuanzhong"></span>
                </div>
              </div>
              <input type="text" v-model="item.title">
            </div>
          </div>
          <div class="pagination">
            <Page :total="total" show-elevator @on-change="changePage"></Page>
          </div>
        </div>
      </div>
      <div slot="footer">
        <button @click="close">
          <span class="iconfont icon-close-bold"></span>
        </button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import picTypeList from '../apiData/picTypeList.js'
  import picList from '../apiData/picList.js'
  export default {
    name: "uploadPic",  // 上传商品图
    props: {
      displaySwitch: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        typeName: '',  // 左侧搜索类目text
        typeId: 0,  // 当前类目ID
        typeList: [],  // 类目列表
        picList: [],  // 当前类目图片list
        pageIndex: 1,  // 页码
        total: 0,  // 当前类目图片总数
        checkedPic: [],  // 选择的图片
      }
    },
    watch: {
      typeId: {
        handler(val) {
          let totalPic = picList;
          this.picList = [];
          if(val===0) {
            let totalTemp = [];
            let temp = [];
            totalPic.forEach(item => {
              item.list.forEach(item1 => {
                item1.forEach(item2 => {
                  temp.push(item2)
                })
              })
            });
            this.total = temp.length;
            for(let i = 0;i<temp.length;i+=10){
              totalTemp.push(temp.slice(i,i+10))
            }
            this.picList = totalTemp;
            console.log(this.picList[this.pageIndex]);
          }else{
            totalPic.forEach(item => {
              if(item.id === val) {
                let temp = [];
                item.list.forEach(item1 => {
                  item1.forEach(item2 => {
                    temp.push(item2)
                  })
                });
                this.total = temp.length;
                this.picList = item.list

              }
            })
          }
        },
        immediate: true
      }
    },
    created() {
      this.getData()
    },
    methods: {
      getData() {
        this.typeList = picTypeList;
      },
      // 关闭弹窗
      close() {
        this.checkedPic = [];
        this.$emit('uploadSwitch', false);
      },
      // 左侧查找类目
      searchKey() {

      },
      // 选择左侧类目
      select(e) {
        this.typeId = e[0].id
      },
      // 选择图片
      checkPic(item) {
        if(this.checkedPic && this.checkedPic.length>0) {
          let index = this.checkedPic.indexOf(item);
          if(this.checkedPic.length <= 4) {
            if(index >= 0) {
              this.checkedPic.splice(index,1)
            }else{
              this.checkedPic.push(item)
            }
          }else{
            if(index >= 0) {
              this.checkedPic.splice(index,1)
            }else{
              this.$Message.info('最多选择5张图片！')
            }
          }
        }else{
          this.checkedPic.push(item)
        }
      },
      // 使用选中的图片
      useCheckedPic() {
        this.$emit('checkedPic', this.checkedPic);
        this.close();
      },
      // 删除图片
      deletePic() {
        this.checkedPic.forEach(item => {
          let index = this.picList[this.pageIndex-1].indexOf(item);
          if(index>= 0) {
            this.picList[this.pageIndex-1].splice(index,1)
          }
        })
      },
      // 换页
      changePage(e) {
        this.pageIndex = e;
      }
    }
  }
</script>

<style lang="scss" scoped>
  /deep/ .ivu-modal{
    position: relative;
    .body{
      /*border: 1px solid red;*/
      padding-right: 20px;
      display: flex;
      .left{
        width: 240px;
        min-height: 400px;
        border-right: 1px solid #f0f0f0;
      }
      .right{
        width: 660px;
        min-height: 400px;
        padding-left: 16px;
        .picListBox{
          width: 644px;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          .picBox{
            width: 128.8px;
            margin-top: 8px;
            .img{
              width: 128.8px;
              height: 128.8px;
              .imgB{
                width: 110px;
                height: 110px;
                margin: 9.4px;
                border-radius: 3px;
                overflow: hidden;
                border: 2px solid transparent;
                position: relative;
                img{
                  width: 100%;
                  height: 100%;
                  cursor: pointer;
                }
                i{
                  display: inline-block;
                  font-size: 10px;
                  font-style: normal;
                  height: 16px;
                  width: 26px;
                  border-radius: 8px;
                  text-align: center;
                  background: #2d8cf0;
                  position: absolute;
                  top: 10px;
                  right: 10px;
                  color: #fff;
                }
                span{
                  position: absolute;
                  bottom: -15px;
                  right: -5px;
                  color: #2d8cf0;
                  font-size: 36px;
                }
              }
            }
            input{
              margin: 6px 0;
              border: none;
              outline: none;
              padding: 0 9.4px;
              width: 100%;
            }
          }
          .picBox.active{
            .imgB{
              border: 2px solid #2d8cf0;
            }
          }
        }
        .handleBox, .pagination{
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: left;
          Button{
            margin-right: 8px;
          }
        }
        .pagination{
          justify-content: right;
        }
      }
    }
    .ivu-modal-footer{
      border-top: none;
      padding: 0;
      button{
        background: #fff;
        border: none;
        position: absolute;
        top: 14px;
        right: 16px;
        cursor: pointer;
      }
      button:hover{
        span{
          opacity: 0.7;
        }
      }
    }
  }
  /deep/ .ivu-tree{
    margin-top: 16px;
    ul.ivu-tree-children{
      li{
        margin: 0 16px 0 0;
        padding: 6px 0;
        cursor: pointer;
        border-radius: 4px;
        span:hover{
          color: #2d8cf0;
          background: transparent;
        }
      }
      .ivu-tree-title-selected, .ivu-tree-title-selected:hover{
        background: transparent;
        color: #2d8cf0;
      }
    }
  }
</style>
